<template>
    <el-container>
        <el-main>
            <!-- 轮播图 -->
            <el-carousel :interval="4000" type="card" height="400px">
                <el-carousel-item v-for="(goods, index) in recommend1" :key="index">
                    <router-link :to="{ name: 'detail', params: { id: goods.id } }"><!-- 点击跳转到商品详情页 -->
                        <div style="position: relative;">
                            <div style="position: absolute;z-index: 2;width: 300px;left: 20px;top: 25px;">
                                <p style="font-size:38px; color:white;"> {{ goods.name }} </p>
                                <p style="text-align: left; font-size:10px; color:white;"> {{ goods.intro }}</p>
                            </div>
                            <img :src="api.imgUrl + goods.cover" :style="{ width: '100%' }" />
                        </div>
                    </router-link>
                </el-carousel-item>
            </el-carousel>
            <!-- 第一栏 -->
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" text-color="#E6A23C"
                active-text-color="#E6A23C" @select="handleSelect" :ellipsis="false">
                <el-menu-item class="secondtitle">最近热销</el-menu-item>
            </el-menu>
            <el-row :gutter="20">
                <el-col :span="8" v-for="(goods, index) in recommend2" :key="index">
                    <el-card :body-style="{ padding: '0px' }" shadow="hover" v-if="index < 3">
                        <router-link :to="{ name: 'detail', params: { id: goods.id } }">
                            <img :src="api.imgUrl + goods.cover" class="image">
                        </router-link>
                        <div :style="{ padding: '14px' }">
                            <span>{{ goods.name }}</span>
                            <div class="bottom">
                                <span class="intro">{{ goods.intro }}</span>
                                <span>￥{{ goods.price }}</span>
                                <el-button text class="button" @click="addshopCar(goods.id)">加入购物车</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="4" :offset="19">
                    <el-button type="warning" class="gomany" @click="goRecommendList(1)">更多推荐 &gt;</el-button>
                </el-col>
            </el-row>
            <!-- 第二栏 -->
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" text-color="#E6A23C"
                active-text-color="#E6A23C" @select="handleSelect" :ellipsis="false">
                <el-menu-item class="secondtitle">新品推荐</el-menu-item>
            </el-menu>
            <el-row :gutter="20">
                <el-col :span="8" v-for="(goods, index) in recommend3" :key="index">
                    <el-card :body-style="{ padding: '0px' }" shadow="hover" v-if="index < 3">
                        <router-link :to="{ name: 'detail', params: { id: goods.id } }">
                            <img :src="api.imgUrl + goods.cover" class="image">
                        </router-link>
                        <div :style="{ padding: '14px' }">
                            <span>{{ goods.name }}</span>
                            <div class="bottom">
                                <span class="intro">{{ goods.intro }}</span>
                                <span>￥{{ goods.price }}</span>
                                <el-button text class="button" @click="addshopCar(goods.id)">加入购物车</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="4" :offset="19">
                    <el-button type="warning" class="gomany" @click="goRecommendList(2)">更多推荐 &gt;</el-button>
                </el-col>
            </el-row>
        </el-main>
    </el-container>


</template>

<script setup>
import { ref, onMounted } from 'vue';
import api from '@/api/api'
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const store = new useStore();
const router = new useRouter();

const goRecommendList = (rec) => {
    router.push({
        name: 'recommend',
        params: { rec: rec }
    })
}

const addshopCar = (id) => {
    if (store.getters.isLogin) {
        api.addshopcar(id, store.getters.userInfo.id)
            .then(ret => {
                if (ret.flag) {
                    ElMessage({
                        message: "添加成功",
                        type: "success"
                    })
                }
                else {
                    ElMessage({
                        message: "添加失败",
                        type: "error"
                    })
                }
            })
    }
    else {
        ElMessage({
            message: "请先登录！",
            type: "error"
        })
        router.push({ name: 'login' })
    }
}

var recommend1 = ref({});
var recommend2 = ref({});
var recommend3 = ref({});

const init = () => {
    // 获得推荐信息
    api.getRecommend(1)
        .then(ret => {
            recommend1.value = ret.result;
        })

    api.getRecommend(2)
        .then(ret => {
            recommend2.value = ret.result;
        })

    api.getRecommend(3)
        .then(ret => {
            recommend3.value = ret.result;
        })
}

onMounted(init)
</script>

<style scoped>
/* 轮播图样式 */
.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

/* 推荐区块样式 */
.secondtitle {
    font-size: 25px;
    font-weight: bold;
}

.intro {
    text-align: left;
    font-size: 12px;
    color: #999;
    width: 150px;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
}

.button {
    padding: 0;
    min-height: auto;
}

.el-card {
    margin: 20px;
}

.image {
    width: 100%;
    display: block;
}

.el-col {
    margin-top: 20px;
}

.gomany {
    width: 200px;
    height: 50px;
    font-size: 20px;
}

/* 取消routerlink的下划线 */
.router-link-active {
    text-decoration: none;
}
</style>

